  <div class="container">
    <div class="row">
    <accordion close-others="false">
        <accordion-group class="bottom-gap shadow" is-open="true">
            <accordion-heading>
                <i class="glyphicon glyphicon-user"></i> Contact Information<i class="pull-right glyphicon glyphicon-chevron-down"></i>
            </accordion-heading>
            <abbr title="First Name">{{member.contact.firstName}}</abbr>
            <abbr title="Last Name">{{member.contact.lastName}}</abbr><br>
            <abbr title="Email Address">{{member.contact.email}}</abbr><br>
            <abbr title="Mobile Phone">{{member.contact.mobilePhone}}</abbr>
            <abbr title="Home Phone">{{member.contact.homePhone}}</abbr>
        </accordion-group>
        <accordion-group class="bottom-gap shadow" is-open="false">
            <accordion-heading>
                <i class="glyphicon glyphicon-th-large"></i> Programs & Events<i class="pull-right glyphicon glyphicon-chevron-down"></i>
            </accordion-heading>

            <table id="programs-md-lg" class="table table-bordered table-hover hidden-xs hidden-sm ">
                <thead>
                    <tr class="active">
                        <th>Program</th>
                        <th>Date</th>
                        <th>Teacher</th>
                        <th>Centre</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="program in member.programProps">
                        <td>{{program.programTypeProp.displayName}}</td>
                        <td>{{program.startYYYYMMDD  + 'T000000Z' | date:'MMM yyyy'}}</td>
                        <td>{{program.teacherProp.email}}</td>
                        <td>{{program.groupProp.displayName}}</td>
                    </tr>
                </tbody>
            </table>

            <table id="programs-xs-sm" class="table table-bordered hidden-md hidden-lg" ng-repeat="program in member.programProps">
                <thead>
                <tr class="active">
                    <th>Program</th>
                    <th>{{program.programTypeProp.displayName}}</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Date</td>
                    <td>{{program.startYYYYMMDD  + 'T000000Z' | date:'MMM yyyy'}}</td>
                </tr>
                <tr>
                    <td>Teacher</td>
                    <td>{{program.teacherProp.email}}</td>
                </tr>
                <tr>
                    <td>Centre</td>
                    <td>{{program.groupProp.displayName}}</td>
                </tr>
                </tbody>
            </table>

        </accordion-group>
        <accordion-group class="bottom-gap shadow" is-open="false">
            <accordion-heading>
                <i class="glyphicon glyphicon-th-list"></i> Interactions<i class="pull-right glyphicon glyphicon-chevron-down"></i>
            </accordion-heading>
        </accordion-group>
    </accordion>
    </div>
  </div>
